<template>
  <Card>
    <p slot="title">
      <Icon type="social-twitch-outline"></Icon>
      用户评论
    </p>

    <div class="body">
      <div style="margin-bottom: 25px">
        <label>文章标题查找:</label>
        <Input
          icon="ios-search"
          v-model="searchIn"
          placeholder="输入文章标题"
          clearable
          style="width:200px;margin-left: 10px;margin-right: 10px"/>

        <Button type="ghost" @click="searchClick">查询</Button>
      </div>

      <Table :loading="loading" stripe :columns="columns" :data="data"></Table>

    </div>
  </Card>
</template>

<script>
  export default {
    name: "CommentManage",
    mounted() {
      this.$emit('selectMenu', '1-6');
    },
    data() {
      return {
        searchIn: '',
        loading: false,
        columns: [
          {
            title: '序号',
            type: 'index'
          },
          {
            title: '文章标题',
            key: 'title',
            ellipsis: true
          },
          {
            title: '最新评论时间',
            key: 'newestTime',
            sortable: true
          },
          {
            title: '评论数量',
            key: 'commentCount',
            sortable: true
          },
          {
            title: '查看',
            render: (h, params) => {
              return h('Button', {
                props: {
                  type: 'info'
                },
                on: {
                  click: () => {
                    let index = params.index;
                    let id = this.data[index].id;
                    this.$router.push({name: 'CommentList', params: {id}})
                  }
                }
              }, [
                h('Icon', {
                  props: {
                    type: 'ios-eye-outline'
                  },
                  style: {
                    marginRight: '5px'
                  }
                }),
                '查看评论'
              ])
            }
          }
        ],
        data: []
      }
    },
    created() {
      this.requestNewList();
    },
    methods: {
      searchClick() {
        let val = this.searchIn;
        if (val.length == 0) {
          this.$Message.warning("是不是忘记了输入");
        } else {   //查询的
          this.data.length = 0;
          this.loading = true;
          this.http.get('/get-comment-key', {
            key: val
          }, data => {
            data.forEach(item => {
              let data = {
                title: item.title,
                newestTime: item.time,
                commentCount: item.count,
                id: item.id
              };
              this.data.push(data);
            })
          }, error => {
            this.$Message.error(error);
          });
          this.loading = false;
        }
      },
      requestNewList() {  //获取最新的评论信息
        this.data.length = 0;
        this.loading = true;
        this.http.get('/get-comment-new', {
          size: 10
        }, data => {
          data.forEach(item => {
            let data = {
              title: item.title,
              newestTime: item.time,
              commentCount: item.count,
              id: item.id
            };
            this.data.push(data);
          })
        }, error => {
          this.$Message.error(error);
        });
        this.loading = false;
      }
    }
  }
</script>

<style lang="stylus" scoped>
  .body
    margin: 10px
</style>
